<template>
  <div class="drug-prescription-table" v-if="activeTab == 'pharmacy-py'">

    <div class="table-title">{{info.rxName}}
      <span style="margin-left: 30px;">{{ info.storageName }}</span>
    </div>
    <!-- @selection-change="handleSelectionChange" -->
    <el-table :data="info.detailList" style="width: 100%"  >
      <el-table-column width="55"  v-if="info.dispenseStatus != '3'" >
        <template #header>
            <el-checkbox v-model="checked"   @change="handleCheckChange"></el-checkbox>
        </template>
        <template #default="scope">
          {{ scope.$index+1 }}
        </template>
      </el-table-column>
      <el-table-column prop="drugName" label="药品" width="280px">
        <template #default="scope">
         <div v-if="scope.row.drugCategory != '3'">
            <span style="margin-right: 10px;" >{{ scope.row.drugName }}</span>
            {{ scope.row.drugDosage }}
            {{ scope.row.drugDosageUnitText }}*
            {{ scope.row.minPackQty }}
            {{ scope.row.minPackUnitText }}/
            {{ scope.row.packUnitText }}
        </div>
        <div v-else-if="scope.row.drugCategory == '3'">
            <span style="margin-right: 10px;" >{{ scope.row.drugName }}</span>
            {{ scope.row.minPackQty }}
            {{ scope.row.minPackUnitText }}/
            {{ scope.row.packUnitText }}
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="用法" width="230px">
        <template #default="scope">
          {{ scope.row.usageCodeText }},
          {{ scope.row.frequencyCodeText }},
          {{ scope.row.dosage }}
          {{ scope.row.dosageUnitText }}/次,
          {{ scope.row.cycle }}
          {{ scope.row.cycleUnitText }}

        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注">

      </el-table-column>
      <el-table-column prop="remark" label="总量" width="90px">
        <template #default="scope">
          {{ scope.row.totalOutQty }}{{ scope.row.totalOutQtyUnitText }}
        </template>
      </el-table-column>
      <el-table-column prop="dispenseQty" label="已配" width="90px">
        <template #default="scope" >
          {{ scope.row.dispenseQty }}{{ scope.row.totalOutQtyUnitText }}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="本次配" width="90px">
        <template #default="scope" >
          <span style="color:#16ADA4">  {{scope.row.totalOutQty == scope.row.dispenseQty ? 0 :scope.row.totalOutQty}}{{ scope.row.totalOutQtyUnitText }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="drug-prescription-table" v-if="activeTab == 'pharmacy-fy'">
    <div class="table-title">{{info.rxName}}</div>
    <el-table :data="info.detailList" style="width: 100%"  >
      <el-table-column type="index" width="55" label="序号" >
      </el-table-column>
      <el-table-column prop="drugName" label="药品" width="300px">
        <template #default="scope">
         <div v-if="scope.row.drugCategory != '3'">
            <span style="margin-right: 10px;" >{{ scope.row.drugName }}</span>
            {{ scope.row.drugDosage }}
            {{ scope.row.drugDosageUnitText }}*
            {{ scope.row.minPackQty }}
            {{ scope.row.minPackUnitText }}/
            {{ scope.row.packUnitText }}
        </div>
        <div v-else-if="scope.row.drugCategory == '3'">
            <span style="margin-right: 10px;" >{{ scope.row.drugName }}</span>
            {{ scope.row.minPackQty }}
            {{ scope.row.minPackUnitText }}/
            {{ scope.row.packUnitText }}
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="用法" width="300px">
        <template #default="scope">
          {{ scope.row.usageCodeText }},
          {{ scope.row.frequencyCodeText }},
          {{ scope.row.dosage }}
          {{ scope.row.dosageUnitText }}/次,
          {{ scope.row.cycle }}
          {{ scope.row.cycleUnitText }}

        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注">

      </el-table-column>
      <el-table-column prop="remark" label="总量" width="150px">
        <template #default="scope">
          {{ scope.row.totalOutQty }}{{ scope.row.totalOutQtyUnitText }}
        </template>
      </el-table-column>
      <el-table-column prop="dispenseQty" label="已发" width="150px">
        <template #default="scope" >
          {{ scope.row.deliveryQty }}{{ scope.row.totalOutQtyUnitText }}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="本次发" width="150px">
        <template #default="scope" >
          <span style="color:#16ADA4">{{ scope.row.currentDeliveryQty }}{{ scope.row.totalOutQtyUnitText }}</span>
          
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  list?: Array<{
    id?: string | number;
    name: string;
    usage: string;
    remark: string;
    total: string;
    sent: string;
    current: string;
  }>;
  info: any;
  activeTab: string;
}>();
const info = props.info;
const activeTab = props.activeTab;
const infoForm = ref({
    "rxId": info.rxId,
    detailList: [],
});
const emit = defineEmits(['closeDrawer']);

const checked = ref(false);
const handleCheckChange = () => {
  if(checked.value == true){
     let data:any = {
        "rxId": info.rxId,
        "detailList": [
        ]
      }

      for (let index = 0; index < info.detailList.length; index++) {
        let item = info.detailList[index];
        data.detailList.push({
          drugId: item.drugId,
          currentDispenseQty: item.totalOutQty,
        })
      }
      infoForm.value = data;
      // //console.log(infoForm.value,'西药');
      emit('closeDrawer',infoForm.value);
  }else{
    let data:any = {
      "rxId": info.rxId,
      "detailList": [
      ]
    }
    emit('closeDrawer',data);
  }
};
if(info.dispenseStatus == '1'){
  checked.value = true;

  handleCheckChange();

}

const checkSelectable = (row: any, index: number) => {
  //console.log(info.dispenseStatus,'row');
  
  // 当 dispenseStatus 为 3 时禁用选择框（返回 false 表示不可选择）
  return 
};

 

</script>

<style scoped>
.drug-prescription-table {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px 0 #e9e9e9;
  margin: 0;
  overflow: hidden;
}
.table-title {
  font-size: 20px;
  font-weight: 500;
  color: #222;
  background: #f8f8f8;
  height: 52px;
  line-height: 52px;
  font-size: 14px;
  background: #f8f8f8;
  border-radius: 0px 0px 0px 0px;
  padding: 0px 17px;
}
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 16px;
  color: #222;
}
th,
td {
  padding: 12px 8px;
  text-align: left;
  background: #fff;
}
th {
  color: #bdbdbd;
  font-weight: 400;
  font-size: 15px;
  background: #fff;
}
tr:not(:last-child) td {
  border-bottom: 1px solid #f0f0f0;
}
thead th {
  border-bottom: 1px solid #f0f0f0;
  border-top: 1px solid #f0f0f0;
}
td.highlight,
th.highlight {
  color: #000000;
  font-weight: 500;
}
tr:last-child td {
  border-bottom: none;
}
.highlight_1 {
  font-size: 13px;
  color: #16ada4;
}
</style>
